---
# title: "Background Position"
title: "背景图像位置"
# description: "Utilities for controlling the position of an element's background image."
description: "用于控制元素背景图片位置的功能类"
features:
  responsive: true
  customizable: false
  hover: false
  focus: false
---

import plugin from 'tailwindcss/lib/plugins/backgroundPosition'
import { ConfigSample } from '@/components/ConfigSample'
import { Variants } from '@/components/Variants'
import { Disabling } from '@/components/Disabling'

export const classes = { plugin }

<!-- ## Usage -->
## 使用

<!-- Use the `bg-{side}` utilities to control the position of an element's background image. -->
使用 `bg-{side}` 功能类来控制元素的背景图片的位置。

```html lightBlue
<template preview>
  <div class="flex justify-around mb-8">
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-left-top</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-left-top bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-top</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-top bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-right-top</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-right-top bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
  </div>
  <div class="flex justify-around mb-8">
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-left</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-left bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-center</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-center bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-right</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-right bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
  </div>
  <div class="flex justify-around">
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-left-bottom</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-left-bottom bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-bottom</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-bottom bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
    <div class="flex-1">
      <p class="text-center text-sm text-light-blue-600 font-medium mb-1">.bg-right-bottom</p>
      <div class="mx-auto bg-light-blue-300 rounded-md w-24 h-24 bg-right-bottom bg-no-repeat" style="background-image:url('https://images.unsplash.com/photo-1459262838948-3e2de6c1ec80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=64&h=64&q=80');"></div>
    </div>
  </div>
</template>

<div class="bg-no-repeat **bg-left-top** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-top** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-right-top** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-left** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-center** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-right** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-left-bottom** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-bottom** ..." style="background-image: url(...);"></div>
<div class="bg-no-repeat **bg-right-bottom** ..." style="background-image: url(...);"></div>
```

<!-- ## Responsive -->
## 响应式

<!-- To control the position of an element's background image at a specific breakpoint, add a `{screen}:` prefix to any existing background position utility. For example, adding the class `md:bg-top` to an element would apply the `bg-top` utility at medium screen sizes and above. -->
要在特定的断点处控制元素背景图像的位置，可以在任何现有的背景位置功能类中添加 `{screen}:` 前缀。例如，将 `md:bg-top` 类添加到一个元素中，就可以在中等尺寸以上的屏幕上使用 `bg-top` 功能类。

```html
<div class="bg-center **md:bg-top** ..." style="background-image: url(...)"></div>
```

<!-- For more information about Tailwind's responsive design features, check out the [Responsive Design](/docs/responsive-design) documentation. -->
关于 Tailwind 的响应式设计功能的更多信息，请查看[响应式设计](/docs/responsive-design)文档。

<!-- ## Customizing -->
## 自定义

### Background Positions

<!-- By default Tailwind provides nine `background-position` utilities. You change, add, or remove these by editing the `theme.backgroundPosition` section of your Tailwind config. -->
默认情况下，Tailwind 提供了九个 `background-position` 功能类。您可以通过编辑您的 Tailwind 配置的 `theme.backgroundPosition` 部分来改变，添加或删除这些功能类。

```diff-js
  // tailwind.config.js
  module.exports = {
    theme: {
      backgroundPosition: {
        bottom: 'bottom',
+       'bottom-4': 'center bottom 1rem',
        center: 'center',
        left: 'left',
-       'left-bottom': 'left bottom',
-       'left-top': 'left top',
        right: 'right',
        'right-bottom': 'right bottom',
        'right-top': 'right top',
        top: 'top',
+       'top-4': 'center top 1rem',
      }
    }
  }
```

<!-- ### Variants -->
### 变体

<Variants plugin="backgroundPosition" />

<!-- ### Disabling -->
### 禁用

<Disabling plugin="backgroundPosition" />
